<template>
	<div class="product-detail">
		<van-swipe class="my-swipe"
				   :autoplay="3000"
				   indicator-color="white">
			<van-swipe-item v-for="item in gallery"
							:key="item.id">
				<img :src="item.img_url"
					 alt=""
					 width="100%"
					 style="display:block">
			</van-swipe-item>
		</van-swipe>
    <Tips />
		<div class="info">
			<div class="title">{{info.name}}</div>
			<div class="goods_brief">{{info.goods_brief}}</div>
			<div class="retail_price">{{info.retail_price | RMBformat}}</div>
		</div>
		<van-cell title="展示弹出层"
				  is-link
				  @click="isSkuShow = !isSkuShow" />
		<div class="attribute">
			<h3>商品参数</h3>
			<ul>
				<li v-for="(item,key) in attribute"
					:key="key">
					<div class="l">{{item.name}}:</div>
					<div class="r van-ellipsis">{{item.value}}</div>
				</li>
			</ul>
		</div>
		<div class="goods_desc"
			 v-html="info.goods_desc"></div>

		<div class="title0">
			<span>常见问题</span>
		</div>
		<ul class="issue">
			<li v-for="item in issue"
				:key="item.id">
				<h3>{{item.question}}</h3>
				<p>{{item.answer}}</p>
			</li>
		</ul>
		<div class="title0">
			<span>大家都在看</span>
		</div>
		<Products :goodsList="goodsList" />

    <div class="zhanwei"></div>
		<van-sku ref="sku"
				 v-model="isSkuShow"
				 :sku="sku"
				 :goods="goods"
				 :hide-stock="sku.hide_stock" />

		<AppGoodsActive @addCart="addCart" 
						:goodsCount="goodsCount" />
	</div>
</template>

<script>
import AppGoodsActive from '@/components/common/AppGoodsActive'
import { getPruductDetailList, getGetGoodsRelatedlist, getCartCount, addCart } from '@/network/api'
import Tips from "@/components/detailComp/Tips";
import Products from "@/components/homeComp/Products";
export default {
	created() {
		this.getPruductDetailData()
		this.getGetGoodsRelatedData()
		this.getGoodsCartCount()
	},
	components: {
		Tips,
		Products,
		AppGoodsActive
	},
	data() {
		return {
			//控制sku是否显示
			isSkuShow: false,
			// 商品sku数据
			sku: {
				tree: [],
				// 显示库存
				hide_stock: false,
				price: '0',   // 默认价格（单位元）
				stock_num: 0, // 商品总库存
			},
			// 商品信息
			goods: {
				// 商品默认缩略图
				picture: ''
			},
			// 轮播图数组
			gallery: [],
			// 商品信息数据
			info: {},
			// 商品参数数据
			attribute: [],
			// 常见问题数据
			issue: [],
			// 相关产品列表
			goodsList: [],
			// 购物车数量
			goodsCount: '',
			// 详情页的数据列表
			productList: []

		}
	},
	methods: {
		// 获取商品详情页数据
		getPruductDetailData() {
			getPruductDetailList(this.$route.query.id).then(res => {
				if (res.errno == 0) {
					// console.log(res);
					this.gallery = res.data.gallery
					this.info = res.data.info
					this.attribute = res.data.attribute
					this.issue = res.data.issue
					this.goods.picture = res.data.info.list_pic_url
					this.sku.price = res.data.info.retail_price
					this.sku.stock_num = res.data.info.goods_number
					this.productList = res.data.productList
				}
			})
		},

		// 获取相关产品数据
		getGetGoodsRelatedData() {
			getGetGoodsRelatedlist(this.$route.query.id).then(res => {
				if (res.errno == 0) {
					this.goodsList = res.data.goodsList
					// console.log(this.goodsList);
				}
			})
		},

		// 添加购物车
		addCart() {
			if (!sessionStorage.getItem('token')) {
				this.$toast('请先登录')
				return
			}
			if (this.isSkuShow) {
				// 发起请求添加购物车
				addCart(this.$route.query.id, this.productList[0].id, this.$refs.sku.getSkuData().selectedNum).then(res => {
					if (res.errno == 0) {
						console.log(res);
						this.goodsCount = res.data.cartTotal.goodsCount
						this.$toast.success('成功添加到购物车')
						console.log(this.goodsCount);
						setTimeout(() => {
							this.isSkuShow = false
						}, 1000);
					}
				})
				// console.log('添加购物车');
			} else {
				this.isSkuShow = true
			}
		},

		// 获取购物车产品数量
		getGoodsCartCount() {
			getCartCount().then(res => {
				if (res.errno == 0) {
					// console.log(res);
					this.goodsCount = res.data.cartTotal.goodsCount
				}
			})
		}

	}
}
</script>

<style scoped lang='less'>
.product-detail {
	margin-bottom: 0.5rem;
}
.info {
	background-color: #fff;
	text-align: center;
	line-height: 0.4rem;
	padding: 0.1rem 0;
	border-bottom: 1px solid #ccc;
	.title {
		font-size: 0.2rem;
	}
	.retail_price {
		color: darkred;
	}
}
.attribute {
	background-color: #fff;
	margin-top: 0.2rem;
	padding: 0.1rem 0.168rem;
	h3 {
		font-size: 0.1638rem;
		line-height: 0.5rem;
	}
	li {
		height: 0.4rem;
		line-height: 0.4rem;
		background-color: #efefef;
		display: flex;
		margin-bottom: 0.1rem;
		border-radius: 0.05rem;
		.l {
			width: 30%;
			text-align: right;
			margin-right: 0.1rem;
			color: #999;
			font-size: 0.12rem;
		}
		.r {
			flex: 1;
			font-size: 0.13rem;
		}
	}
}
/* 深度样式写法，穿透ui组件的样式，直接添加在标签上 */
/deep/.goods_desc {
	img {
		display: block;
		width: 100%;
	}
}
.title0 {
	width: 100%;
	background: #fff;
	height: 0.5rem;
	position: relative;
	&::before {
		content: "";
		width: 50%;
		height: 2px;
		background: #ccc;
		position: absolute;
		top: 50%;
		margin-top: -1px;
		left: 50%;
		margin-left: -25%;
	}
	span {
		width: 30%;
		position: relative;
		background: #fff;
		display: block;
		text-align: center;
		margin: 0 auto;
		height: 0.5rem;
		line-height: 0.5rem;
	}
}
.issue {
	padding: 0 4%;
	background: #fff;
	li {
		h3 {
			height: 0.3rem;
			line-height: 0.3rem;
			padding-left: 0.2rem;
			position: relative;
			font-weight: normal;
			&::before {
				content: "";
				width: 4px;
				height: 4px;
				background: darkred;
				display: inline-block;
				position: absolute;
				left: 0;
				top: 50%;
				margin-top: -2px;
			}
		}
		p {
			font-size: 0.12rem;
			color: #999;
			line-height: 0.2rem;
			padding-left: 0.2rem;
		}
	}
}
.zhanwei {
  width: 100%;
  height: .35rem;
}
</style>